<template>
  <li>
    <div :class="{ bold: isFolder }" @click="toggle">
      <span v-if="isFolder">{{ isOpen ? "-" : "+" }}</span>
      {{ item.name }}
    </div>
    <ul v-show="isOpen" v-if="isFolder">
      <tree-item
        class="item"
        v-for="(child, index) in item.childrenNode"
        :key="index"
        :item="child"
      ></tree-item>
    </ul>
  </li>
</template>

<script>
export default {
  name: "TreeItem",
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      isOpen: false,
    };
  },
  computed: {
    isFolder() {
      return this.item.childrenNode && this.item.childrenNode.length;
    }
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
      }else {
        this.sceneClick()
        sessionStorage.setItem('pano',JSON.stringify({
          name: this.item.districtNameAbbr,
          path: this.item.panoramaPath,
          scene: this.item.panoramaIdent
        }))
        this.$store.state.currentName = this.item.districtNameAbbr
      }
    },
    sceneClick() {
      if (!this.isFolder && this.item.panoramaIdent != null) {
        this.bus.$emit('scene-click', {
          name: this.item.districtNameAbbr,
          scene: this.item.panoramaIdent
        })
      }else {
        alert("未绑定")
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.item {
  cursor: pointer;
  font-size: 1rem;
}
.bold {
  font-weight: bold;
}
ul {
  padding-left: 1em;
  line-height: 1.5em;
  list-style-type: dot;
}
li {
  list-style: none;
}
</style>